<template lang="pug">
  ModuleWrapper(title="支农惠农" flex="1")
    .chart-wrap(ref="chart")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      data: [
        {
          label: '总人口',
          value: 0,
        },
        {
          label: '农业人口',
          value: 0,
        },
        {
          label: '新型职业农民',
          value: 0,
        },
        {
          label: '产业工人',
          value: 0,
        },
      ]
    }
  },
  methods: {
    renderChart() {
      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
        color: ['#1860d0', '#45c761', '#1bd8bb', '#8ad10c',],
        legend: {
          textStyle: {
            color: '#ccc'
          }
        },
        xAxis: {
          type: 'category',
          data: ['2016', '2017', '2018', '2019', '2020'],
          splitLine: false
        },
        yAxis: [
          {
            type: 'value',
            name: '耕地地力保护补贴面积（万亩）',
            min: 0,
            max: 20,
			left:"10%",
            interval: 4,
            splitLine: {
              lineStyle: {
                color: ['rgba(255, 255, 255, .25)']
              }
            }
          },
          {
            type: 'value',
            name: '补贴资金（万元）',
            min: 0,
            max: 15000,
            interval: 5000,
            splitLine: {
              lineStyle: {
                color: ['rgba(255, 255, 255, .25)']
              }
            }
          },
		  // {
		  //   type: 'value',
		  //   name: '补贴户数（万户）',
		  //   min: 0,
		  //   max: 5,
		  //   interval: 1,
		  //   splitLine: {
		  //     lineStyle: {
		  //       color: ['rgba(255, 255, 255, .25)']
		  //     }
		  //   }
		  // }
        ],
        grid: {
          left: '8%',
          right: '4%',
          bottom: '3%',
          top: '35%',
          containLabel: true
        },
        series: [
          {
            name: "耕地地力保护补贴面积（万亩）",
            data: [15.89, 15.585, 15.0871, 15.0034, 14.9569],
            type: 'bar',
            barWidth: 20, //柱图宽度
			label:{
				show:true,
				position:"top",
				textStyle:{
					color:"#fff"
				}
			}
          },
          {
            name: "补贴资金（万元）",
            data: [1288.6, 1245.73, 1204, 1198.5, 1192.07162],
            type: 'bar',
            yAxisIndex: 1,
            barWidth: 20, //柱图宽度
			label:{
				show:true,
				position:"top",
				textStyle:{
					color:"#fff"
				}
			}
          },
		 //  {
		 //    name: "补贴户数（万户）",
		 //    data: [3.2104, 0, 3.1005, 3.0381,3.0305],
		 //    type: 'line',
			// label:{
			// 	show:true,
			// 	position:"top",
			// 	textStyle:{
			// 		color:"#fff"
			// 	}
			// }
		    
		 //  }
        ]
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  width: 98%;
  height: rem(100);
  display: flex;
  margin: 0px auto;
  background-color: rgba($color: #ffff, $alpha: 0.15);
  .chart-wrap{
    flex: 1;
  }
}
</style>
